<template>
  <div class="userList divBox">
    <el-card class="box-card" shadow="hover">
      <template class="clearfix" v-slot:header>
        <el-tabs v-model="tableFrom.registerFrom" @tab-click="getUserList(1)">
          <el-tab-pane label="全部" name="-99"></el-tab-pane>
          <el-tab-pane label="微信公众号" name="0"></el-tab-pane>
          <el-tab-pane label="微信小程序" name="1"></el-tab-pane>
        </el-tabs>
        <div class="container">
          <el-form :model="tableFrom" label-width="72px" ref="userListRefs" class="userListCls">
            <el-row :gutter="20">
              <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
                <el-col v-bind="grid">
                  <el-form-item label="用户搜索：" prop="keyword" class="selectFormWidth100">
                    <el-input v-model="tableFrom.keyword" placeholder="请输入用户名或手机号" size="small" clearable></el-input>
                  </el-form-item>
                </el-col>
              </el-col>
              <template v-if="collapse && $IsExhibition">

              </template>
              <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
                <el-form-item>
                  <el-button type="primary" icon="el-icon-search" size="small" @click="getUserList('1')">搜索</el-button>
                  <el-button size="small" @click="resetForm('userListRefs')">重置</el-button>
                  <a v-if="$IsExhibition" class="user-ml-8 ml10" @click="collapse = !collapse">
                    <template v-if="!collapse">
                      展开 <i class="el-icon-arrow-down"></i>
                    </template>
                    <template v-else>
                      收起 <i class="el-icon-arrow-up"></i>
                    </template>
                  </a>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </template>
      <el-table
        v-loading="userLoading"
        :data="userList"
        style="width: 100%;"
        size="mini"
        class="table"
      >
        <el-table-column type="expand">
          <template slot-scope="{ row }">
            <el-form label-position="left" inline label-width="83px" class="demo-table-expand">
              <el-form-item label="首次访问：">
                <span>{{ row.addLoginDate | uctTimeFileter("YYYY-MM-DD HH:mm") }}</span>
              </el-form-item>
              <el-form-item label="首次访问IP：">
                <span>{{ row.addLoginIP }}</span>
              </el-form-item>
              <el-form-item label="近次访问：">
                <span>{{ row.lastLoginDate | uctTimeFileter("YYYY-MM-DD HH:mm") }}</span>
              </el-form-item>
              <el-form-item label="近次访问IP：">
                <span>{{ row.lastLoginIP }}</span>
              </el-form-item>
              <el-form-item label="真实姓名：">
                <span>{{ row.realName }}</span>
              </el-form-item>
              <el-form-item label="地址：">
                <span>{{ row.address }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column type="selection" width="60"></el-table-column>
        <el-table-column prop="id" label="ID" min-width="80"></el-table-column>
        <el-table-column label="头像" min-width="60">
          <template slot-scope="{ row }">
            <div class="taoBox_img" v-viewer>
              <img v-lazy="$uploadURL(row.headImage)" :alt="$uploadURL(row.headImage)">
            </div>
          </template>
        </el-table-column>
        <el-table-column label="昵称" min-width="150">
          <template slot-scope="{ row }">
            <i v-if="row.gender == '0'" class="el-icon-male mr5"></i>
            <i v-if="row.gender == '1'" class="el-icon-female mr5"></i>
            <span>{{ row.nickName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="手机号" min-width="100">
          <template slot-scope="{ row }">
            <span>{{ row.mobile }}</span>
          </template>
        </el-table-column>
        <el-table-column label="用户类型" min-width="100">
          <template slot-scope="{ row }">
            <span>{{ row.registerFrom }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" fixed="right" align="center">
          <template slot-scope="{ row }">
            <el-button type="text" size="small" @click="edit(row.id)">编辑</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-dropdown placement="bottom">
              <span class="el-dropdown-link">
                更多<i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-if="!row.refAgent" @click.native="setExtension(row.id)">添加上级推广人</el-dropdown-item>
                <el-dropdown-item v-else-if="row.refAgent" @click.native="setExtension(row.id)">修改上级推广人</el-dropdown-item>
                <el-dropdown-item v-if="row.refAgent" @click.native="delPromoter(row)">清除上级推广人</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <div class="replyBox">
        <pagination
          v-show="pagination.total > 0"
          :total="pagination.total"
          :page.sync="pagination.page"
          :limit.sync="pagination.limit"
          :page-sizes="[10, 20, 30, 50]"
          @pagination="replyChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
  import {
    getUserListApi
  } from '@/api/user';
  import {
    PUTUserEditListApi as putUserListApi,
    DELETEUserDelAPi as delUserDelAPi
  } from '@/api/agent';

  export default {
    name: 'Index',
    data() {
      return {
        grid: {
          xl: 7,
          lg: 10,
          md: 12,
          sm: 12,
          xs: 24
        },
        tableFrom: {
          keyword: '',
          registerFrom: '-99'
        },
        collapse: false,
        userLoading: false,
        userList: [],
        pagination: {
          page: 1,
          limit: 10,
          total: 0
        }
      }
    },
    mounted() {
      this.getUserList();
    },
    methods: {
      /**
       * 编辑
       */
      edit(id) {
        const _this = this;
        _this.$modal({
          componentProps: {
            userId: id
          },
          component: (resolve) => require(['./components/userEdit'], resolve),
          props: {
            title: '编辑',
            customClass: 'zdyDialogCls userDialogCls',
            width: '100%',
            closeOnClickModal: false
          },
          methods: {
            getUserEditList() {
              _this.getUserList('1');
            }
          }
        });
      },
      /**
       * 重置
       */
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.getUserList('1');
      },
      /**
       * 删除推广人
       * @param userId 用户ID
       */
      delPromoter(row) {
        const _this = this;
        this.$confirm(`解除【${row.nickName}】的上级推广人`, {
          title: `解除【${row.nickName}】的上级推广人`,
          message: this.$createElement('div', null, [`确定要解除【${row.nickName}】的上级推广人吗？`, `解除【${row.nickName}】的上级推广人后将无法恢复，请谨慎操作！`].map((item) => this.$createElement('p', null, item))),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delUserDelAPi(row.id).then(res => {
            _this.getUserList();
            _this.$message.success(`解除成功！`)
          }).catch(() => {
            _this.$message.error(`解除成功！`)
          });
        }).catch(() => {
          _this.$message({
            type: 'info',
            message: `已取消回收站`
          });
        });
      },
      /**
       * 修改上级推广人
       * @param userId 用户ID
       */
      setExtension(userId) {
        const _this = this;
        this.$modal({
          componentProps: {},
          component: (resolve) => require(['./components/editSpread'], resolve),
          props: {
            title: '修改推广人',
            customClass: 'zdyDialogCls spreadDialogCls',
            width: '100%',
            closeOnClickModal: false
          },
          methods: {
            putAgentInfo(agentId) {
              putUserListApi(userId, {
                agentId: agentId
              }).then(() => {
                _this.$message.success('修改推广人成功！')
                _this.getUserList();
              });
            }
          }
        });
      },
      // 获取用户信息
      getUserList(num) {
        this.$set(this, 'userLoading', true);
        getUserListApi({
          pageNumber: num ? num : this.pagination.page,
          pageSize: this.pagination.limit,
          orderBy: 'id desc',
          keyWord: this.tableFrom.keyword,
          isAgent: -1,
          registerFrom: this.tableFrom.registerFrom == -99 ? -1 : this.tableFrom.registerFrom
        }).then(res => {
          console.log('获取用户信息', res.data);
          this.$set(this, 'userList', res.data);
          this.$set(this.pagination, 'total', res.head.totalCount);
          this.$set(this, 'userLoading', false);
        }).catch(() => {
          this.$set(this, 'userList', []);
          this.$set(this.pagination, 'total', 0);
          this.$set(this, 'userLoading', false);
        });
      },
      replyChange(reply) {
        this.$set(this.pagination, 'page', reply.page);
        this.$set(this.pagination, 'limit', reply.limit);
        this.getReplyList();
      },
    }
  }
</script>

<style lang="scss" scoped>
  .userList {
    .user-ml-8{
      font-size: 12px;
      color: #1682e6;
    }
    .demo-table-expand {
      font-size: 0;
      label {
        width: 90px;
        color: #99a9bf;
      }
      .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 25%;
      }
    }
    ::v-deep .el-table__expanded-cell[class*=cell]{
      padding:20px 50px !important;
    }
    .el-icon-male {
      font-size: 15px;
      color: #2db7f5;
    }
    .el-icon-female {
      font-size: 15px;
      color: #ed4014;
    }
    .taoBox_img {
      width: 36px;
      height: 36px;
      border-radius: 4px;
      overflow: hidden;
      cursor: pointer;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .el-dropdown-link {
      cursor: pointer;
      color: #409EFF;
      font-size: 12px;
    }
    .el-icon-arrow-down {
      font-size: 12px;
    }
  }
</style>

<style lang="scss">
  .el-dialog.spreadDialogCls {
    max-width: 960px;
  }
  .el-dialog.userDialogCls {
    max-width: 700px;
  }
</style>
